<template>
  <div class="containerPark">
    <div class="echart" ref="chart"></div>
  </div>
</template>

<script>
export default {
  props: {
    parkcarId: {
      type: String,
    },
    listCar: {
      type: Number,
    },
    rylistCar: {
      type: Number,
    },
    cylistCar: {
      type: Number,
    },
  },
  data() {
    return {
      fontSize: 14,
      fontCentSzie: 14,
      padding: false,
    };
  },
  computed: {
    parkCarpie() {
      return this.parkcarId;
    },
  },
  methods: {
    ScreenWidth() {
      if (screen.width <= 1920) {
        this.fontSize = 12;
        this.padding = false;
        this.fontCentSzie = 14;
      } else {
        this.fontSize = 14;
        this.fontCentSzie = 22;
        this.padding = true;
      }
    },
    drawLine() {
      var that = this;
      this.ScreenWidth();
      // 基于准备好的dom，初始化echarts实例

      const chart = this.$refs.chart;

      // 基于准备好的dom，初始化echarts实例

      var myChart = this.$echarts.init(chart); //推荐
      // 绘制图表
      let option = {
        tooltip: {
          trigger: "item",
          position: function (p) {
            // 位置回调
            // //console.log && //console.log(p);
            return [p[0] + 10, p[1] - 10];
          },
        },
        // legend: {
        //   top: "5%",
        //   left: "center",
        // },
        title: {
          text: this.listCar, //图形标题，配置在中间对应效果图的80%
          left: "center",
          top: "center",
          textStyle: {
            color: "rgb(50,197,233)",
            fontSize: this.fontCentSzie,
            align: "center",
          },
        },
        series: [
          {
            type: "pie",
            radius: ["70%", "100%"],
            avoidLabelOverlap: false,
            itemStyle: {
              //   borderRadius: 10,
              borderColor: "rgb(16, 53, 97)",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
              textStyle: {
                fontSize: that.fontSize,
                color: "#fff",
              },
            },

            // emphasis: {
            //   label: {
            //     show: false,
            //     fontSize: "10",
            //     // fontWeight: "bold",
            //   },
            // },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: this.rylistCar,
                name: "入园车辆",
                itemStyle: { color: "#fff683" },
              },
              {
                value: this.cylistCar,
                name: "出园车辆",
                itemStyle: { color: "rgb(3, 204, 246)" },
              },
              //   { value: 580, name: "邮件营销" },
              //   { value: 484, name: "联盟广告" },
              //   { value: 300, name: "视频广告" },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize(); //resize 页面大小改变，调整大小
      });
    },
  },
  mounted() {
    this.drawLine();
  },
};
</script>
<style lang="less" scoped>
.echart {
  // width: 100%;
  height: 4.13vw;
}
.containerPark {
  width: 100%;
}
</style>
